<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口测试工具</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 页面标题 -->
    <div class="page-header">
      <h1></h1>
        <!-- 通过JS动态填充 -->
    </div>

    <div id="wrap">
        <!-- 左侧导航栏 -->
        <div id="topbar">
            <ul class="sidebar">
                <!-- 通过JS动态填充 -->
            </ul>
        </div>

        <!-- 右侧内容区 -->
        <div id="content">
            <div class="right_opt">
                <!-- 当前接口标题 -->
                <div class="right_top">
                    <h2 class="api-title"></h2>
                </div>

                <!-- 接口详情区域 -->
                <div class="right_detail" id="apiDetails">
                    <!-- 通过JS动态填充 -->
                </div>
            </div>
        </div>
    </div>

    <!-- API接口模板 -->
    <template id="apiTemplate">
        <div class="endpoint-section">
            <div class="api-docs">
                <!-- API基本信息 -->
                <div class="api-info">
                    <span class="api-method"></span>
                    <span class="api-path"></span>
                </div>
                
                <!-- API描述 -->
                <div class="api-description"></div>
                
                <!-- 请求参数 -->
                <div class="api-params">
                    <h4>请求参数</h4>
                    <div class="request-params"></div>
                </div>

                <!-- 响应参数 -->
                <div class="api-response">
                    <h4>响应参数</h4>
                    <div class="response-params"></div>
                </div>

                <!-- 示例 -->
                <div class="api-examples">
                    <h4>示例</h4>
                    <div class="example-content"></div>
                </div>
            </div>

            <!-- 接口测试区域 -->
            <div class="api-test-section">
                <h4>接口测试</h4>
                <form class="api-form">
                    <div class="form-content">
                        <!-- 通过JS动态填充表单字段 -->
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn blue_btn submit-btn">发送请求</button>
                        <button type="reset" class="btn white_btn">重置</button>
                    </div>
                </form>

                <!-- 请求响应信息 -->
                <div class="request-response-info">
                    <!-- 请求数据 -->
                    <div class="request-section">
                        <h4>请求数据</h4>
                        <pre class="request-data"></pre>
                    </div>
                    
                    <!-- 响应数据 -->
                    <div class="response-section">
                        <h4>响应数据</h4>
                        <pre class="response-data"></pre>
                    </div>
                    
                    <!-- 执行结果 -->
                    <div class="info-section">
                        <h4>执行结果</h4>
                        <div class="info_show"></div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- 数组项模板 -->
    <template id="arrayItemTemplate">
        <div class="array-item">
            <div class="item-content">
                <!-- 通过JS动态填充 -->
            </div>
            <button type="button" class="btn white_btn remove-item">删除</button>
        </div>
    </template>

    <!-- 错误提示模板 -->
    <template id="errorTemplate">
        <div class="field-error">
            <!-- 通过JS动态填充 -->
        </div>
    </template>

    <!-- 加载必要的JavaScript文件 -->
    <script type="text/javascript" src="./js/jquery/jquery.js"></script>
    <script type="text/javascript" src="./js/jquery/jquery.form.js"></script>
    <script type="text/javascript" src="./js/adndisk.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>

    <!-- 检查浏览器是否支持 Promise -->
    <script>
        if (typeof Promise !== 'undefined') {
            if (window.addEventListener) {
                window.addEventListener('unhandledrejection', handleUnhandledRejection);
            } else if (window.attachEvent) {
                // IE8 及更早版本的支持
                window.attachEvent('onunhandledrejection', handleUnhandledRejection);
            }
        }

        // 错误处理函数
        function handleUnhandledRejection(event) {
            var reason = event ? (event.reason || event.detail && event.detail.reason) : 'Unknown error';
            console.error('Unhandled promise rejection:', reason);
        }

        // 全局错误处理
        window.onerror = function(message, source, lineno, colno, error) {
            console.error('Global error:', {
                message: message,
                source: source,
                lineno: lineno,
                colno: colno,
                error: error
            });
            return false;
        };
    </script>
</body>
</html>